<script setup lang="ts">
import { ref, defineProps, onMounted } from 'vue'
import {uploadFiles} from '@/api/uploadFiles'
import {useProductStore} from '@/stores/modudels/product2'

const productStore = useProductStore()
const formData = productStore.formData

const emits = defineEmits(['updateImgUrls'])

const props = defineProps(['index','imgUrls'])

const fileInputImg = ref(null)

const uploadFileImg = ()=>{
  fileInputImg.value.click()
}

onMounted(()=>{
  if(props.imgUrls){
    imageSrc.value = props.imgUrls
  }
})

const imageSrc=ref([])
const selectBigImg =async (e)=>{
  if (e.target.files.length>0) {
    const files = e.target.files
    for (const file of files) {
      const result = await uploadFiles(file)
      if (result.code === 200) {
        imageSrc.value.push(result.data)
      }
    }
    emits('updateImgUrls', props.index, imageSrc.value)
    // productStore.updateSkuInfoImgUrl(props.index, imageSrc.value)
  }
}
</script>

<template>
  <div class="upload_layout">
    <img v-if="imageSrc.length>0" v-for="item in imageSrc" :src="item" :key="item" alt="" style="width: 60px;height: 60px" />
    <el-button icon="Plus" @click="uploadFileImg">
      <input
        type="file"
        accept="image/*"
        :multiple="true"
        @change="selectBigImg"
        ref="fileInputImg"
        style="display: none"
      />
    </el-button>
  </div>
</template>

<style scoped>
.upload_layout{
  width: 100%;
  height: auto;
  display: flex;
  .el-button{
    border: 1px dashed #ccc;
    padding: 0;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    :deep(.el-icon){
      width: 22px;
      height: 22px;
    }
  }
}

</style>
